<template>
	<view class="" style="padding-bottom: 120rpx;">
		<u-navbar title="直播" bgColor="transparent" leftIconSize="0" :autoBack="true" :fixed="false"></u-navbar>
		<view class="p-30 videoinfo_pages">
			<!-- #ifdef MP-WEIXIN -->
			<live-player id='live-player' class="video_box" @netstatus="netstatus" @statechange="statechange"
				@error="error" mode="live" :autoplay="livePlay" :src="info.v_url" :muted="muted">
				<view class="live_top_box display_flex">
					<view class="flex-1 display_flex">
						<image style="width: 28rpx;height: 22rpx;" src="../../static/images/video/liveing_img.png">
						</image>
						<view class="f-10 c-white" style="margin-left: 4rpx;">{{info.video_status}}</view>

					</view>
					<!-- <view class="f-10 c-gray">{{nowTime}}</view> -->
				</view>
				<view class="player_icon_box" v-if="livePlay && !staus" style="color: #fff;">
					<u-loading-icon text="安全加载中..." textSize="30rpx"></u-loading-icon>
				</view>
				<view v-if="!livePlay" class="player_icon_box" @click="livePlay=true">
					<image class="player_icon" src="../../static/images/videoinfo/player.png"></image>
				</view>
				<block v-if="!livePlay">
					<image v-if="isFull" style="height: 100vh;width: 100wh;" class="player_bk_img" :src="info.images">
					</image>
					<image v-else style="height: 510rpx;width: 100wh;" class="player_bk_img" :src="info.images"></image>
				</block>
				<view class="live_bottom_box display_flex">
					<!-- <image class="live_bottom_icon" src="../../static/images/videoinfo/luping.png"></image> -->
					<!-- <image class="live_bottom_icon" src="../../static/images/videoinfo/paizhao.png"></image> -->
					<image v-if="muted" class="live_bottom_icon" src="../../static/images/videoinfo/shengyinoff.png"
						@click="muted=false"></image>
					<image v-else class="live_bottom_icon" src="../../static/images/videoinfo/shengyin.png"
						@click="muted=true"></image>

					<image v-if="isFull" class="live_bottom_icon" src="../../static/images/videoinfo/suoxiao.png"
						@click="changeLiveplayer"></image>
					<image v-else class="live_bottom_icon" src="../../static/images/videoinfo/quanping.png"
						@click="changeLiveplayer"></image>

				</view>
			</live-player>
			<!-- :enable-auto-rotation="true" -->
			<!--  #endif -->
			<!-- #ifdef H5||APP-PLUS -->
			<video class="video_box" controls :autoplay="true" :is-live="true" :show-mute-btn="true" :src="info.v_url"
				:poster="info.images">
				<view class="live_top_box display_flex">
					<view class="flex-1 display_flex">
						<image style="width: 28rpx;height: 22rpx;" src="../../static/images/video/liveing_img.png">
						</image>
						<view class="f-10 c-white" style="margin-left: 4rpx;">{{info.video_status}}</view>
					</view>
					<view class="f-10 c-gray">{{nowTime}}</view>
				</view>
				<!-- <view class="live_bottom_box display_flex">
				<image class="live_bottom_icon" src="../../static/images/videoinfo/luping.png"></image>
				<image class="live_bottom_icon" src="../../static/images/videoinfo/paizhao.png"></image>
				<image v-if="muted" class="live_bottom_icon" src="../../static/images/videoinfo/shengyinoff.png"
					@click="muted=false"></image>
				<image v-else class="live_bottom_icon" src="../../static/images/videoinfo/shengyin.png"
					@click="muted=true"></image>
				<image class="live_bottom_icon" src="../../static/images/videoinfo/quanping.png"
					@click="changeLiveplayer"></image>
			</view> -->

			</video>
			<!--  #endif -->
			<view class="mt-30"></view>
			<u-notice-bar :text="text"></u-notice-bar>
			<view class="card p-30 mt-30">
				<view class="flex-row align-center">
					<view class="fw-700">
						课程直播
					</view>
					<view class="tag ml-30">
						直播中
					</view>
				</view>
				<view class="flex-row mt-30">
					<!-- <view class="flex-row align-center small-size">
						<u-icon name="map-fill" color="#6CB500"></u-icon>
						<view class="ml-10">
							{{info.type_text}}
						</view>
					</view> -->
					<view class="flex-row align-center small-size">
						<u-icon name="clock-fill" color="#6CB500"></u-icon>
						<view class="ml-10">
							开放时间 08:00 -23:59
						</view>
					</view>
				</view>
			</view>
			<view class="textareab mt-30">
				<u-textarea v-model="msg" placeholder="留言板" border="none"></u-textarea>
				<view class="mt-30 flex-row justify-end">
					<view class="">
						<u-button @click="submit" text="提交" :customStyle="{'width':'120rpx','height':'60rpx'}"
							shape="circle" color="linear-gradient( 270deg, #6CB500 0%, #88DA10 100%)"></u-button>
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 60rpx;">
				<u-button @click="callPhone" icon="phone-fill" iconColor="#fff" text="联系老师" shape="circle"
					color="linear-gradient( 270deg, #6CB500 0%, #88DA10 100%)"></u-button>
			</view>
		</view>

		<page-tabbar :value="1" />
		<u-modal @cancel="cancel" :show="show" :title="title" :content='content' :showCancelButton="showCancelButton" :confirmText="confirmText" @confirm="confirm">
			<view class="slot-content" v-if="isLogin">
				<u-input placeholder="请输入观看直播密码" border="surround" v-model="password" clearable></u-input>
			</view>
			<view class="text-center" v-else>
				{{content}}
			</view>
		</u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				text: '温馨提示:画面不能正常显示，请退出重新进入',
				msg:"",
				value: '',
				nowTime: '',
				timer: '',
				info: '',
				muted: false,
				isFull: false,
				livePlay: false,
				listPadbot: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? uni.getSystemInfoSync()
					.safeAreaInsets
					.bottom + 50 : 50,
				tabBottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? uni.getSystemInfoSync()
					.safeAreaInsets
					.bottom : 2,

				password: "",
				show: false,
				title: '温馨提示',
				confirmText: '',
				content: '',
				showCancelButton:false
			}
		},
		onShow() {
			let vm = this;
			this.timer = setInterval(() => {
				this.getNowTime()
			}, 1000)
		},
		onLoad() {
			if (!this.isLogin) {
				this.show = true,
				this.title = "温馨提示";
				this.confirmText = "去登录";
				this.content = "请及时登录账号观看直播"
				
			} else {
				let live_password = uni.getStorageSync('live_password')
				if (live_password != this.$shopInfo.live_password) {
					this.show = true;
					this.title = "观看直播";
					this.confirmText = "确定";
					this.content = ""
					this.showCancelButton = true
				}
			}
		},
		methods: {
			cancel() {
				uni.redirectTo({
					url:'/pages/home/home'
				})
			},
			submit() {
				let vm = this;
				message({
					'msg': this.msg,
					'monitor_info_id': 0,

				}).then(res => {
					vm.$refs.uToast.show({
						type: 'success',
						message: '提交成功',
						complete() {
							vm.msg = ""
							vm.initData()
						}
					})
				})
			},
			callPhone(phone) {
				// phone = 4006682670;
				uni.makePhoneCall({
					phoneNumber: '4006682670', //仅为示例
					fail() {}
				});
			},
			confirm() {
				if (this.isLogin) {
					if (this.$shopInfo.live_password == this.password) {
						this.show = false
						uni.setStorageSync('live_password', this.password);
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: '密码错误',
							complete() {}
						})
					}
				} else {
					uni.redirectTo({
						url: '/pages/common/login'
					})
				}
			},
			netstatus(e) {
				console.log('netstatus', e);
			},
			statechange(e) {
				console.log('live-player code:', e.detail.code)
				this.staus = true
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},
			changeLiveplayer() {
				console.log('xxxxxxxx');
				let player = wx.createLivePlayerContext('live-player', this);
				this.isFull = !this.isFull
				if (this.isFull) {
					player.requestFullScreen({
						direction: 90,
						success() {
							this.bigMenu = false
							console.log('success');
						},
						fail() {
							console.log('fail');
						}
					})
				} else {
					player.exitFullScreen()
				}
			},
			getNowTime() {
				var date = new Date();
				var year = date.getFullYear(), //得到年份
					month = ("0" + (date.getMonth() + 1)).slice(-2),
					sdate = ("0" + date.getDate()).slice(-2),
					hour = ("0" + date.getHours()).slice(-2),
					minute = ("0" + date.getMinutes()).slice(-2),
					second = ("0" + date.getSeconds()).slice(-2);
				this.nowTime = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;;
			}
		}
	}
</script>

<style>
	.tag {
		color: #6CB500;
		background: rgba(108, 181, 0, 0.1);
		border-radius: 60rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
	}

	.textareab {
		border: 1rpx solid #D3D3D3;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.live_box {
		width: 100%;
		height: 450rpx;
		position: relative;
	}

	.player_bk_img {
		width: 100%;
		// height: 510rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.live_top_box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		z-index: 2;
	}

	.player_icon_box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.player_icon {
		width: 80rpx;
		height: 80rpx;
	}

	.video_box {
		width: 100%;
		height: 450rpx;
	}

	.live_bottom_box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		z-index: 2;
		justify-content: flex-end;
	}

	.live_bottom_icon {
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
	}

	.open_btn {
		color: #83C100;
		font-size: 20rpx;
		padding: 4rpx 20rpx;
		border-radius: 100px;
		margin-left: 30rpx;
		background-color: #eff4e7;
	}

	.videoinfo_bk {
		padding: 30rpx;
		background-color: #FAFBF6;
		border-bottom-left-radius: 26rpx;
		border-bottom-right-radius: 26rpx;
	}

	.login_btn_box {
		margin: 30rpx 200rpx 0 200rpx;
		position: relative;

	}

	.block_btn_bk {
		width: 100%;
	}

	.phone_img {
		width: 30rpx;
		height: 30rpx;
		margin-top: 4rpx;
	}

	.login_btn_text {
		color: #ffffff;
		font-size: 32rpx;
		letter-spacing: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 4;
	}
</style>